<template>
  <view v-if="showInfo" class="contanier">
    <view class="head">
      <view class="userMsg">
        <image :src="commentData.headimgurl || '/static/images/logo.png'" class="avatar" mode="aspectFill" />
        <view>
          <view class="name">{{ commentData.nickname }}</view>
          <view class="grey">{{ commentData.goods_sku }}</view>
        </view>
        <image v-if="commentData.isBest" class="hot" src="/static/images/common/hot_tag.png" />
      </view>
      <view class="date">{{ commentData.created_at | parseTime('{y}-{m}-{d}') }}</view>
    </view>
    <view class="content">
      <view class="text" v-text="commentData.comment_content"></view>
      <view class="img_content">
        <view v-if="commentData.comment_video" class="pic-item">
          <image
            v-if="commentData.video_cover"
            class="goodsimg"
            mode="aspectFill"
            :src="commentData.video_cover"
            :style="{width:'230rpx',height:'230rpx'}"
            @click="show(idx)" />
          <video v-else :controls="false" :show-center-play-btn="false" style="width: 100%; height: 100%" :src="commentData.comment_video"></video>
          <view class="play-button" @click.stop.prevent="playVideo(commentData.comment_video)">
            <image class="icon-play" src="/static/images/order/icon_evaluate_play.png" />
          </view>
        </view>
        <block v-for="(it,idx) in imageList" :key="idx">
          <image
            v-if="picLimit ? (commentData.comment_video ? idx < 2 : idx < 3) : true"
            class="goodsimg"
            mode="aspectFill"
            :src="it"
            :style="{width: imageList.length === 1 ? '350rpx' : '230rpx',height: imageList.length === 1 ? '350rpx' : '230rpx'}"
            @click="show(idx)" />
        </block>
      </view>
      <view v-if="picLimit && imageList && imageList.length > 3" class="count-block">{{ commentData.comment_video ? imageList.length + 1 : imageList.length }}张</view>
    </view>
    <view v-if="videoUrl" class="mask-video-box">
      <video :src="videoUrl" class="mask-video" autoplay>
        <cover-image class="close" src="/static/images/icon/icon_return_white.png" @click="videoUrl = ''"></cover-image>
      </video>
    </view>
  </view>
</template>

<script>
/**
 * 商品评论组建
 */
export default {
  name: 'CommentList',
  filters: {
    time(val) {
      return val.slice(0, -9)
    }
  },
  props: {
    commentData: {
      type: Object,
      default() {
        return {
          imageList: []
        }
      }
    },
    picLimit: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      imgList: [],
      imageList: [],
      showInfo: false,
      videoUrl: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // 初始化大图预览数据集合
      if (this.commentData.comment_img) {
        this.imageList = this.commentData.comment_img.split(',')
        this.imageList.forEach(it => {
          this.imgList.push(it)
        })
      } else {
        this.imageList = []
      }
      this.showInfo = true
    },
    playVideo(url) {
      this.videoUrl = url
    },
    show(index) {
      uni.previewImage({
        current: index,
        urls: this.imgList,
        loop: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
  display: none;
}
.contanier {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #fff;
  .mask-video-box{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: #000;
    width: 100%;
    height: 100%;
    .mask-video{
      width: 100%;
      height: 100%;
    }
    .close{
      position: absolute;
      top: 50rpx;
      // #ifdef MP-WEIXIN
      top: 100rpx;
      // #endif
      left: 50rpx;
      width: 50rpx;
      height: 50rpx;
    }
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .date {
      font-size: 20rpx;
      color: #999;
      white-space: nowrap;
    }
    .userMsg {
      display: flex;
      align-items: center;
      .avatar {
        width: 60rpx;
        height: 60rpx;
        flex-grow: 0;
        border-radius: 50%;
        margin-right: 12rpx;
      }
      .name {
        @include text-ellipsis-line(1);
        display: flex;
        align-items: left;
        flex-direction: column;
        // width: 51%;
        color: #010101;
        font-weight: 500;
        margin-right: 20rpx;
        overflow: hidden;
        font-size: 26rpx;
      }
      .grey{
        @include text-ellipsis-line(1);
        font-size: 22rpx;
        color: #999;
      }
      .hot {
        width: 62rpx;
        height: 30rpx;
      }
    }
  }
  .content{
    position: relative;
    .count-block{
      position: absolute;
      background-color: rgba(0,0,0,0.6);
      border-radius: 14rpx;
      line-height: 28rpx;
      padding: 0 20rpx;
      color: white;
      font-size: 20rpx;
      right: 16rpx;
      bottom: 18rpx;
    }
  }
  .text {
    white-space: pre-line;
    margin-top: 24rpx;
  }
  .pic-item{
    position: relative;
    width: 230rpx;
    height: 230rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    image{
      width: 100%;
      height: 100%;
    }
    .limit{
      position: absolute;
      top: -60rpx;
      left: 84rpx;
      width: 380rpx;
      height: 97rpx;
    }
    .play-button{
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-play{
        width: 60rpx;
        height: 60rpx;
      }
    }
    .icon-del{
      width: 26rpx;
      height: 26rpx;
      position: absolute;
      right: -8rpx;
      top: -15rpx;
    }
  }
  .img_content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24rpx;
    .goodsimg{
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
    .goodsimg:nth-child(3n + 3) {
      margin-right: 0;
    }
  }
}
</style>
